<template>
    <!-- 添加 -->
    <table border="1"
        style="border-collapse: collapse; width: 100%; height: 40px;margin-top: 30px;margin-bottom: 30px;">
        <tr>
            <td :colspan="8" style="height: 50px; font-size: 20px;">基本信息</td>
        </tr>
        <tr style="height: 70px;">
            <td style=" font-size: 17px;text-align: center">单据编号</td>
            <td style="text-align: center;"><input v-model="form.stripNumber" :disabled="true" type="text"
                    style="height: 50px; width: 90%;text-align: center;" placeholder="保存后自动生成" />
            </td>
            <td style=" font-size: 17px;text-align: center">退料日期</td>
            <td style="text-align: center;"><input v-model="form.stripDate" :disabled="true" type="date"
                    style="height: 50px; width: 90%;text-align: center;" />
            </td>
        </tr>
    </table>


    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>产品名称</th>
                <th>产品编号</th>
                <th>规格</th>
                <th>退料数量</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.pName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.pNumber" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" /></td>
                <td><input v-model="item.pSpec" type="text" style="height: 40px;width: 100%;text-align: center;"
                        :disabled="true" />
                </td>
                <td><input v-model="item.stripProductNum" type="text"
                        style="height: 40px;width: 100%;text-align: center;" :disabled="true" />
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 合计 -->
    <el-form :model="form" lclass="demo-form-inline" :inline="true" style="margin-top: 40px;">
        <el-form-item label="数量合计">
            <el-input v-model="form.stripNumTotal" style="width: 200px;" :disabled="true" />
        </el-form-item>
    </el-form>

</template>

<script setup lang='ts'>
import axios from 'axios'
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'


//修改
const form = reactive({
    "strippingId": 0,
    "stripNumber": "string",
    "stripWState": 0,
    "stripDocumentNumber": "",
    "stripDate": "2024-12-23T08:59:13.556Z",
    "stripNumTotal": 0,
    "office_Id": "string",
    "user_Id": 0,
    "strippingProducts": [
        {
            "stripProductId": 0,
            "productId": 0,
            "strippingId": 0,
            "stripProductNum": 0,
            "office_Id": "string",
            "user_Id": 0
        }
    ]
})



//反填
const check = ref([])
const FanStrippingProduct = () => {
    axios.get(http.zblnb + '/sc/api/Stripping/FanStrippProduct?StripNumber=' + route.query.stripNumber)
        .then(res => {
            let d = res.data.data;
            console.log(res.data.data)
            form.stripDate = res.data.data.stripDate.substring(0, 10);
            form.stripNumber = res.data.data.stripNumber;
            form.stripNumTotal = res.data.data.stripNumTotal;
            check.value = d.productDetails;
        })
}


onMounted(() => {
    FanStrippingProduct();
})

</script>

<style></style>